// pages/category/category.js
import {request} from '../../request/request'
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    leftMenuData: [],
    rightContainerData: [],
    currentIndex: 0,
    scrollTop: 0
  },
  cateData: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取分类数据
    this.getCateData()
      /* 
    0 web中的本地存储和 小程序中的本地存储的区别
      1 写代码的方式不一样了 
        web: localStorage.setItem("key","value") localStorage.getItem("key")
    小程序中: wx.setStorageSync("key", "value"); wx.getStorageSync("key");
      2:存的时候 有没有做类型转换
        web: 不管存入的是什么类型的数据，最终都会先调用以下 toString(),把数据变成了字符串 再存入进去
      小程序: 不存在 类型转换的这个操作 存什么类似的数据进去，获取的时候就是什么类型
    1 先判断一下本地存储中有没有旧的数据
      {time:Date.now(),data:[...]}
    2 没有旧数据 直接发送新请求 
    3 有旧的数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可
     */

    //  1 获取本地存储中的数据  (小程序中也是存在本地存储 技术)
   let cateData = wx.getStorageSync("cateData")
   console.log(cateData);
  //  如果不含有旧数据
   if(!cateData) {
    //  重新发送请求
    this.getCateData()
   } else {
     // 有旧的数据 定义过期时间  10s 
     if(Date.now() - cateData.time > 1000*10) {
        //  重新发送请求
      this.getCateData()
     } else {
      //  旧数据为过期
      this.cateData = cateData.data
      let leftMenuData = this.cateData.map(item => {
       return item.cat_name
      })
      let rightContainerData = this.cateData[0].children
      // console.log(leftMenuData);
      this.setData({
        leftMenuData,
        rightContainerData
      })
     }
   }
  },
  // 获取分类数据
  /* getCateData() {
    request({
      url: '/categories'
    }).then(res => {
      console.log(res);
      this.cateData = res.message
      wx.setStorageSync('cateData', {
        time: Date.now(),
        data: this.cateData
      })
      let leftMenuData = this.cateData.map(item => {
       return item.cat_name
      })
      let rightContainerData = this.cateData[0].children
      // console.log(leftMenuData);
      this.setData({
        leftMenuData,
        rightContainerData
      })
    })
  }, */
  // 1 使用es6的async await来发送请求
  // 获取分类数据
  async getCateData() {
    let res = await request({
      url: '/categories'
    })
    // console.log(res);
    this.cateData = res.message
    wx.setStorageSync('cateData', {
      time: Date.now(),
      data: this.cateData
    })
    let leftMenuData = this.cateData.map(item => item.cat_name)
    let rightContainerData = this.cateData[0].children
    // console.log(leftMenuData);
    this.setData({
      leftMenuData,
      rightContainerData
    })
  },
  // 左侧菜单的点击事件
  handleItemTap(e) {
    // console.log(e)
    let {index} = e.currentTarget.dataset
    // 更新右侧商品数据
    let rightContainerData = this.cateData[index].children
    this.setData({
      currentIndex: index,
      rightContainerData,
       // 重新设置 右侧内容的scroll-view标签的距离顶部的距离
      scrollTop: 0
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})